<template>
  <div class="flexPage">
    <div class="btnBox">
      <template v-for="(item, idx) in btnList">
        <div :key="idx" class="btnItme" :class="{ bg: isActive == idx }" @click="handleClick(idx)">
          {{ item.name }}
        </div>
      </template>
    </div>

    <div class="screenBox">
      <div class="screen">
        <div id="page" class="visible-md">
          <div class="pageItem">
            <button class="btn btn-primary">测试按钮</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "flexPage",
  components: {},
  props: {},
  data() {
    return {
      isActive: 0,
      btnList: [
        { name: '超小屏幕(手机)-宽度小于768px', tips: '手机-小于768px' },
        { name: '小屏幕(平板)-宽度大于等于768px', tips: '平板-大于等于768px' },
        { name: '中等屏幕(桌面)-宽度大于等于992px', tips: '桌面显示器-大于等于992px' },
        { name: '大屏幕(大桌面)-宽度大于等于1200px', tips: '大桌面显示器-大于等于1200px' },
      ],
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  updated() { },
  methods: {
    handleClick(idx) {
      this.isActive = idx;
      let dom = document.getElementById('page');
      if (idx == 0) {
        dom.className = 'visible-xs';
      } else if (idx == 1) {
        dom.className = 'visible-sm';
      } else if (idx == 2) {
        dom.className = 'visible-md';
      } else if (idx == 3) {
        dom.className = 'visible-lg';
      }

    }
  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.flexPage {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .btnBox {
    display: flex;
    align-items: center;
    padding: 15px;

    .btnItme {
      color: #1890ff;
      padding: 5px 8px;
      border: 1px solid #91d5ff;
      background-color: #fff;
      margin: 0 5px;
      border-radius: 4px;
    }

    .bg {
      background: #e6f7ff;
    }
  }

  .screenBox {
    width: 100%;
    height: calc(100% - 90px);

    .screen {
      border: 1px dashed #cdcccd;
      width: calc(100% - 30px);
      height: 100%;
      margin: 15px;
    }
  }

  .pageItem {
    padding: 10px;
  }
}
</style>